<template>
    <a-row>
        <a-col class="gutter-row" v-for="(item, index) in option.ColArray" :style="{
                display: ShowArray['Col_' + index] ? 'block' : 'none'
            }" :span="item">
            <slot :name="'Col_' + index" :keyStr="'Col_' + index" @HideItem="HideItem"></slot>
        </a-col>
    </a-row>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
    'option': {
        default: () => {
            return {
                ColArray: [24],
                RowGutter: 16,
            }
        }
    },
    'Value': {},
});

var ShowArray = ref({});
for (let i = 0; i < props.option.ColArray.length; i++) {
    ShowArray.value['Col_' + i] = true;
}

const HideItem = (key, value) => {
    ShowArray.value[key] = value;
}


</script>
<style lang="less" scoped></style>